<template>
  <view class="rw-register-container">
    <view class="rw-register-image-wrapper">
        <image class="rw-register-image" src="../../../static/images/visit.jpeg"/>
    </view>
    <view class="rw-register-title">
        我听一束花
    </view>
    <form class="rw-register-form">
        <view class="weui-cell weui-cell_select">
            <view class="weui-cell__bd">
                <picker bindchange="bindAccountChange" :value="accountIndex" :range="accounts">
                    <view class="weui-select">{{accounts[accountIndex]}}</view>
                </picker>
            </view>
        </view>
        <input class="weui-input" placeholder="手机"/>
        <input class="weui-input" placeholder="兴趣爱好" />
        <button class="rw-rigister-button" @click="redictToLists()">注册</button>
    </form>
  </view>
</template>

<script>
export default {
  data(){
      return {
        accounts: ['互联网', '金融', '电商','其他'],
        accountIndex: 0,
      }
  },
  methods:{
      redictToLists(){
           wx.redirectTo({
            url: '../lists/main'
        })
      }
  }
}
</script>

<style lang="scss">
.rw-register-container{
    // border:1rpx solid black;
    width:700rpx;
    height:1100rpx;
    left:50%;
    position:relative;
    top:50%;
    border-radius:20rpx;
    border-color:#bbbbbb;
    transform:translate(-50%,-50%);
}
.rw-register-image-wrapper{
    width:180rpx;
    height:180rpx;
    left:50%;
    position:absolute;
    transform:translateX(-50%);
    top:50rpx;
    image{
        width:100%;
        height:100%;
        border-radius:50%;
    }
}
.rw-register-title{
    position:absolute;
    top:230rpx;
    left:50%;
    transform:translateX(-50%);
    font-size:14px;
    color:#bbbbbb;
}
.rw-register-form{
    font-size:16px;
    position: absolute;
    width:100%;
    top:350rpx;
    input,.weui-cell,button{
        width:420rpx;
        border:1rpx solid #bbbbbb;
        height:76rpx;
        line-height:76rpx;
        border-radius:40rpx;
        position:relative;
        left:50%;
        transform:translateX(-50%);
        box-sizing:border-box;
        padding:0rpx 10rpx;
        margin-bottom:30rpx;
    }
    button{
        margin:0px;
        top:100rpx;
        color:white;
        font-size:16px;
        background-color:#333643;
    }
}

</style>


